<template>
  <a-table
    class="ant-table-striped"
    :rowClassName="
      (record, index) => (index % 2 === 1 ? 'table-striped' : null)
    "
    :columns="columns"
    :pagination="false"
    :data-source="data"
    bordered
  >
    <template #title>
      数据库个数：
      <a-badge
        count="4"
        :number-style="{
          backgroundColor: '#fff',
          color: '#1890ff',
          marginRight: '10px',
          boxShadow: '0 0 0 1px #d9d9d9 inset',
        }"
      />
      表个数：
      <a-badge
        count="10"
        :number-style="{
          backgroundColor: '#fff',
          color: '#1890ff',
          marginRight: '10px',
          boxShadow: '0 0 0 1px #d9d9d9 inset',
        }"
      />
      字段个数：
      <a-badge
        :overflowCount="99999"
        count="200"
        :number-style="{
          backgroundColor: '#fff',
          color: '#1890ff',
          marginRight: '10px',
          boxShadow: '0 0 0 1px #d9d9d9 inset',
        }"
      />
    </template>
  </a-table>
</template>

<script>
const columns = [
  {
    title: '序号',
    width: 100,
    customRender: ({ text, record, index }) => {
      return `${index + 1}`;
    },
    align: 'center',
  },
  {
    title: '数据库',
    dataIndex: 'name',
    slots: { customRender: 'name' },
  },
  {
    title: '表',
    className: 'column-money',
    dataIndex: 'money',
  },
  {
    title: '字段',
    dataIndex: 'address',
  },
  {
    title: '数据类型',
    dataIndex: 'address2',
  },
  {
    title: '数据样本',
    dataIndex: 'address3',
  },
];

const mockData = () => {
  return Array.from({ length: 10 }).map((item, index) => {
    return {
      key: index,
      name: `10.68.1.${Math.random().toFixed(2)}`,
      money: 'PRO-ACL' + Math.random().toFixed(2),
      address: 'name' + Math.random().toFixed(2),
      address2: 'VARCHAR2' + Math.random().toFixed(2),
      address3: '仓央嘉措' + Math.random().toFixed(2),
    };
  });
};

import { reactive, toRefs } from 'vue';

export default {
  setup() {
    const state = reactive({
      data: mockData(),
    });
    const refresh = () => {
      state.data = mockData();
    };
    return {
      ...toRefs(state),
      columns,
      refresh,
    };
  },
};
</script>

<style lang="scss" scoped>
.ant-table-striped :deep(.table-striped) td {
  background-color: #fafafa;
}
</style>